<template>
    <div>
<h2>房号列表</h2>
<div>
<span>房号名称:</span>
<input type="text" v-model="model.Code">
<input type="button" value="查询" class="btn  btn-success"  @click="GetList">
</div>

<table class="table">
<tbody>
    <tr class="bg-primary">
        <td>房号名称</td>
        <td>房型</td>
        <td>房型状态</td>
        <td>状态</td>
        <td>操作</td>
    </tr>



    <tr  v-for="item  in list " :key="list.Id">
        <td>{{item.Code}}</td>
        <td>{{item.Typesss}}</td>
        <td>{{item.FangState?"空闲" :"满人"}}</td>
        <td>{{item.State ?"上架" :"下架"}}</td>
        <td>
            <input type="button" value="下架"   v-if="item.State==1"   class="btn  btn-info"  @click="upstate(item.Id,item.State)">
            <input type="button" value="上架"   v-if="item.State==0"   class="btn  btn-info"  @click="upstate(item.Id,item.State)">
        </td>
    </tr>

</tbody>
</table>

    </div>
</template>

<script setup lang="ts">

import axios from 'axios';

import { ref,reactive, onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();
let list:any=ref([]);

onMounted(()=>{
    GetList();
})


let model=reactive({
    Code:'',
})

const GetList=()=>{
    
axios({

url:'https://localhost:7229/api/House/HouseNoList',
method:'get',
params:model,

})
.then((res)=>{

    console.log(res);
   list.value=res.data;
})

.catch((ree)=>{

console.log(ree);
})

}




//修改转态
const upstate=(Id:any,State:any)=>{

if(State==1){
    State=0;
}
else{
    State=1
}


axios({
url:'https://localhost:7229/api/House/HouseNoState',
method:'put',
params:{
    Id:Id,
    State:State,
}
})
.then((res)=>{

    console.log(res);
    if(res.data>0){
        alert('修改成功')
        GetList();
        return;
        
    }

    else{
        alert('修改失败')
        return;
    }
})


.catch((ree)=>{

console.log(ree);
})






}




</script>

<style scoped>

</style>